<template>
  <div class="page">
    <nav-bar title="重点人员走访记录" border></nav-bar>
    <div class="page-main" style="margin-top: 44px">
      <van-sticky class="page-scroll" :offset-top="44">
        <van-form :show-error="false" ref="from" input-align="right" error-message-align="right" :label-width="120">
          <van-field
            name="personName"
            readonly
            v-model="formParams.intervieweeName"
            label="走访人员"
            right-icon="arrow"
            class="van-field__right-icon-white"
            label-class="van-cell__title_gray"
          />
          <van-field
            name="personDate"
            readonly
            v-model="formParams.interviewTime"
            label="走访时间"
            right-icon="arrow"
            class="van-field__right-icon-white"
            label-class="van-cell__title_gray"
          />
          <van-field
            name="idCard"
            readonly
            v-model="formParams.idCard"
            label="证件号码"
            right-icon="arrow"
            class="van-field__right-icon-white"
            label-class="van-cell__title_gray"
          />
          <van-field
            readonly
            name="labelName"
            v-model="formParams.labelName"
            label="走访人员标签"
            right-icon="arrow"
            class="van-field__right-icon-white"
            label-class="van-cell__title_gray"
          />
          <van-field label="走访记录" readonly class="van-field__right-icon-white" :border="false" />
          <van-field
            readonly
            name="intervieweeDetail"
            v-model="formParams.interviewee_detail"
            placeholder="走访记录"
            rows="5"
            autosize
            type="textarea"
            show-word-limit
            :border="false"
            input-align="left"
            class="van-field__value--textarea"
            maxlength="500"
          />
          <van-field label="现场照片/视频" readonly :border="false">
            <!-- <template #input>
              <van-radio-group v-model="accept" direction="horizontal">
                <van-radio name="image/*">照片</van-radio>
                <van-radio name="video/*">视频</van-radio>
              </van-radio-group>
            </template> -->
          </van-field>
          <van-row style="padding: 0 20px">
            <van-col span="8" v-for="(item, index) in formParams.image_url" :key="index">
              <van-image width="80" height="80" :src="$config.ImageURl + item" />
            </van-col>
          </van-row>
          <!-- <van-field class="van-field__value--upload" input-align="left" :border="false">
            <template #input>
              <van-uploader
                name="fileList"
                v-model="fileList"
                max-count="9"
                capture="camera"
                :accept="accept"
                :max-size="maxSize"
                :preview-image="previewImage"
                :before-read="uploadBeforeRead"
                :after-read="uploadAfterRead"
                @click-preview="previewClick"
              >
                <template #preview-cover="file">
                  <template v-if="format.includes(file.file.name.split('.')[file.file.name.split('.').length - 1])">
                    <div class="van-uploader__preview-masker"></div>
                    <video-player
                      class="video-player vjs-custom-skin"
                      :playsinline="true"
                      :options="{
                        aspectRatio: '16:16',
                        sources: [
                          {
                            src: $config.ImageURl + file.file.url
                          }
                        ]
                      }"
                    ></video-player>
                  </template>
                </template>
                <div class="van-uploader__input--white">
                  <div class="van-uploader__input--content">
                    <div class="upload-image">
                      <img src="@/assets/images/basic/icon_camera@2x.png" />
                    </div>
                    <div class="upload-text">点击拍摄</div>
                  </div>
                </div>
              </van-uploader>
            </template>
          </van-field> -->
          <!-- <div style="margin: 60px 16px">
            <van-row :gutter="23">
              <van-col span="12">
                <template v-if="$route.query.personCode">
                  <van-button block native-type="button" @click="$router.go(-1)">取消</van-button>
                </template>
                <template v-else>
                  <van-button block native-type="button" @click="onClear">清空</van-button>
                </template>
              </van-col>
              <van-col span="12">
                <van-button block type="info" native-type="submit" :disabled="buttonDisabled">提交</van-button>
              </van-col>
            </van-row>
          </div> -->
        </van-form>
      </van-sticky>
    </div>
    <!-- 字典项 -->
    <!-- <van-popup v-model="dictPopupShow" round position="bottom" @close="dictValue = ''">
      <van-picker
        show-toolbar
        :default-index="dictData[dictType] && dictData[dictType].findIndex(o => o.code === dictValue)"
        :columns="dictData[dictType]"
        value-key="description"
        @cancel="dictPopupShow = false"
        @confirm="dictOnConfirm"
      />
    </van-popup> -->
    <!-- 视频预览 -->
    <!-- <gb-video :url="videoUrl" :show.sync="videoPopupShow"></gb-video> -->
  </div>
</template>
<script>
import Cockpit from '@/api/cockpit'
class FormParams {
  constructor() {
    this.addTime = ''
    this.code = ''
    this.image_url = ''
    this.inspector = ''
    this.interviewTime = ''
    this.interviewee = ''
    this.intervieweeName = ''
    this.interviewee_detail = ''
    this.labelCode = ''
    this.labelName = ''
    this.idCard = ''
    // this.personName = ''
    // this.intervieweeTime = ''
    // this.idCard = ''
    // this.labelName = ''
    // this.intervieweeDetail = ''
  }
}
export default {
  data() {
    return {
      code: '',
      idCard: '',
      //   videoPopupShow: false,
      formParams: new FormParams()
      // formParams: {
      //   personName: 'xiaohong',
      //   intervieweeTime: '2021-12-13',
      //   idCard: '121234654564654564',
      //   labelName: '社区人员',
      //   intervieweeDetail: '输入的文字内筒'
      // }
    }
  },
  created() {
    // 字典项
    this.code = this.$route.query.code
    this.idCard = this.$route.query.idCard
    // this.initFormParams(this.$route.query)
  },
  mounted() {
    this.initFormParams()
  },
  methods: {
    // initFormParams(data) {
    //   if (data.personCode) {
    //     this.formParams.gridCode = data.gridCode
    //     this.formParams.interviewee = data.personCode
    //     this.formParams.personName = data.personName
    //     this.formParams.idType = data.idType
    //     this.formParams.idTypeName = data.idTypeName
    //     this.formParams.idCard = data.idCard
    //     this.formParams.labelCode = data.labelCode
    //     this.formParams.labelName = data.labelName
    //   }
    // },
    initFormParams() {
      const params = {
        code: this.code
      }
      Cockpit.GridMember.personDetail(params).then(res => {
        const { data, status } = res
        if (status === 200) {
          // console.log(data.data.inspectionRecordInfo, '454545')
          this.formParams = data.data.inspectionRecordInfo
          this.formParams.idCard = this.idCard
          this.formParams.image_url = this.formParams.image_url.split(',')
        }
      })
    },
    // 视频预览
    previewClick({ file }, detail) {
      const urlArr = this.fileList[detail.index].url.split('.')
      const suffix = urlArr[urlArr.length - 1]
      if (this.format.includes(suffix)) {
        this.videoPopupShow = true
        this.videoUrl = this.$config.ImageURl + this.fileList[detail.index].url
      }
    }
  }
}
</script>
